/*
* 图形报表-合规明细报表
* 人员费用组件
* table 滚动加载
* */
import {messages} from "share/common";
import React from "react";
import {Table} from 'antd';
import FeeDetailReportService
  from "containers/data-center/report/travel-report/fee-detail-report/fee-detail-report.service";
import antdc from 'share/prototype-extend/antd-common';
class PersonDetail extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loadingOver: false,//是否加载完毕
      loading: false,//是否正在加载
      searchParams: {},
      userDetailExpense: [],
      page: 0,
      size: 20,
      columns: [
        {
          title: messages('common.sequence')/*序号*/,
          key: "_index",
          dataIndex: '_index',
          width:'20%',
          render: text => antdc.renderPopover(text),
        },
        {
          title: messages('data-center.key131')/*人员*/,
          key: "expenseOwnerName",
          dataIndex: 'expenseOwnerName',
          render: text => antdc.renderPopover(text),
        },
        {
          title: messages('data-center.key130')/*累计超标金额*/,
          key: "excessAmount",
          dataIndex: 'excessAmount',
          render: text => antdc.renderPopover(text),
        },
        {
          title: messages('data-center.key132')/*累计超标次数*/,
          key: "sum",
          dataIndex: 'sum',
          render: text => antdc.renderPopover(text),
        },
      ],
      willLoadingData: false,//用来显示数据即将被加载的状态
    }
  }

  componentDidMount() {
    const {onRef} = this.props;
    /*
    * 只组件挂载到父组件上面
    * 之后可以直接在父组件调子组件的方法
    * */
    onRef && onRef(this);
  }

  refreshComponentLoading = () => {
    this.setState({
      willLoadingData: true,
      userDetailExpense: []
    })
  };
  refreshComponent = (searchParams) => {
    this.setState({
      page: 0,
      size: 20,
      userDetailExpense: [],
      searchParams
    }, () => {
      this.getExcessExpPersonDetailReport(searchParams)
    })
  };
  getExcessExpPersonDetailReport = (params) => {
    this.state.loading = true;
    let {userDetailExpense} = this.state;
    params.page = this.state.page;
    params.size = this.state.size;
    FeeDetailReportService.getExcessExpPersonDetailReport(params)
      .then(res => {
        res.data.map((item, index) => item._index = index + params.page * params.size + 1);
        if (res.data.length === 0 || res.data.length < this.state.size) {
          //加载完毕
          this.state.loadingOver = true;
          this.state.loading = false;
        } else {
          //页码加1 ，继续加载
          this.state.page += 1;
          this.state.loading = false;
          this.state.loadingOver = false
        }
        this.setState({
          willLoadingData: false,
          userDetailExpense: [...userDetailExpense, ...res.data]
        })
      })
  };

  handleScroll = (e) => {
    if (e.nativeEvent.deltaY <= 0) {
      //向上滚动
    } else {
      if (!this.state.loading && !this.state.loadingOver) {
        //如果没有加载
        this.getExcessExpPersonDetailReport(this.state.searchParams);
      }
    }
  };

  render() {
    const {userDetailExpense, columns, willLoadingData} = this.state;
    return (
      <div className='user-detail-expense-table'>
        <div className="user-detail-table-wrap"
             onWheel={this.handleScroll}>
          <Table columns={columns}
                 size="small"
                 bordered
                 scroll={{x: columns.length * 150,y: 360 }}
                 loading={willLoadingData}
                 dataSource={userDetailExpense}
                 pagination={false}
          />
        </div>
      </div>
    );
  }
}

PersonDetail.propTypes = {
  searchParams: React.PropTypes.any,
  onRef: React.PropTypes.any
};

PersonDetail.defaultProps = {
  height: 400
};

export default PersonDetail;
